<template>
    <div class="records-search">

        <el-row>
            <el-col>
                <el-scrollbar height="70px">
                    
                    
                    <el-form :inline="true" :model="guestbookForm" class="demo-form-inline" size="small">

                        

                        <el-form-item label="学生">
                            <el-input v-model="guestbookForm.stu" placeholder="请输入学号或姓名" clearable style="width: 160px;" />
                        </el-form-item>

                        <el-form-item label="地点">
                            <el-select placeholder="请选择" v-model="guestbookForm.place" clearable style="width: 180px">
                                <el-option v-for="item in systemInitStore.places" :label="item.pname" :key="item.pno" :value="item.pno"/>
                            </el-select>
                        </el-form-item>


                        <el-form-item label="处理方式">
                            <el-select placeholder="请选择" v-model="guestbookForm.ways" clearable style="width: 140px">
                                <el-option v-for="item in systemInitStore.ways" :label="item.wayName" :key="item.wayNo" :value="item.wayNo"/>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="意外原因">
                            <el-select placeholder="请选择" v-model="guestbookForm.causeNo" clearable style="width: 140px">
                                <el-option v-for="item in systemInitStore.causes" :label="item.cname" :key="item.cno" :value="item.cno"/>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="受伤类别">
                            <el-select placeholder="请选择" v-model="guestbookForm.symNo" clearable style="width: 140px">
                                <el-option v-for="item in symList" :label="item.gname" :key="item.gid" :value="item.gid"/>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="时间" style="width: 340px;">
                            <el-date-picker
                                v-model="guestbookForm.time"
                                type="datetimerange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                date-format="YYYY-MM-DD HH:mm:ss"
                                time-format="HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="学部">
                            <el-select v-model="guestbookForm.faculty" placeholder="请选择" clearable style="width: 100px;" >
                                <el-option v-for="item in facultys" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>

                            
                        <el-form-item>
                            <el-button type="primary" @click="onSearch">查询</el-button>
                            <el-button type="warning" @click="onExport">导出以下查询结果</el-button>
                        </el-form-item>
                    </el-form>
                </el-scrollbar>
                
            </el-col>
        </el-row>

    </div>
    



    <el-table :data="tableData" border size="small" style="width: 100%" height="calc(100vh - 215px)" v-loading="loading">
            <el-table-column fixed  prop="hcNo" label="序号"  width="120" />
            <el-table-column prop="sno" label="学号"  width="120"/>
            <el-table-column prop="snameC" label="姓名"  width="120"/>
            <el-table-column prop="clscode" label="班級"  width="80"/>
            <el-table-column prop="sDate" label="就诊时间"  width="200"/>
            <el-table-column prop="place" label="地点"  width="160" :formatter="formatPlace"/>
            <el-table-column prop="cname" label="受伤类别"  width="160" :formatter="formatGroups"/>
            <el-table-column prop="causeNo" label="意外原因"  width="140" :formatter="formatCause"/>
            <el-table-column prop="empID" label="处理人员"  width="160" :formatter="formatEmp"/>
            <el-table-column prop="eDate" label="离开时间" width="200"/>
    </el-table>
    <div style="margin: 20px 0;"></div>
    <el-pagination
        size="small"
        background
        layout="prev, pager, next"
        :total="totalData"
        :page-size="30"
        class="mt-4"
        @change="changePage"
    />
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getListPage, exportData } from '@/api/registers'
import useSystemInitStore from '@/stores/init'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const symList = ref([])
const totalData = ref(0)
const loading = ref(true)

const facultys = [
  {
    value: 'B',
    label: '小学部',
  },
  {
    value: 'I',
    label: '中学部',
  },
]

/// 系统信息
const systemInitStore = useSystemInitStore()

const guestbookForm = reactive({
    page: 1,
    size: 30,
    stu: '',
    time: '',
    faculty: '',
    // sTime: '',
    // eTime: '',
    isPend: true
})

onMounted(() => {

    if(systemInitStore.groups && systemInitStore.groups.children) {
        loadData()
        for(let i = 0; i < systemInitStore.groups.children.length; i++) {
            const items = systemInitStore.groups.children[i]
            for( let k = 0; k < items.children.length; k++) {
                const item = items.children[k]
                symList.value.push(item)
            }
        }
    } else {
        ElMessage.error('系统初始化数据加载失败。')
    }

})

/// 加载数据
const loadData = () => {
    loading.value = true
    getListPage(guestbookForm).then(res => {
        if ( res.code == 200 ) {
            tableData.value = res.data.rows
            totalData.value = res.data.total
            loading.value = false
        } else {
            ElMessage.error('数据加载失败。')
        }
    })
}

/// 列表翻页
const changePage = (currentPage, pageSize) => {
    guestbookForm.page = currentPage
    loadData()
}



const onSearch = () => {
    if(guestbookForm.time && guestbookForm.time.length == 2) {
        guestbookForm.sTime = guestbookForm.time[0]
        guestbookForm.eTime = guestbookForm.time[1]
    }
    guestbookForm.page = 1;
    guestbookForm.size = 20;
    loadData()

}



const onExport = () => {
    const formData = {}
    Object.assign(formData,guestbookForm)
    formData.sDate = formData.sTime
    formData.eDate = formData.eTime
    delete formData.time
    delete formData.page
    delete formData.size
    delete formData.sTime
    delete formData.eTime
    exportData(formData).then(res => {
        // console.log(res)
        // console.log(res)
        // // 处理数据，并下载
        const blob = new Blob([res]);
        /// 创建下载链接
        let url = window.URL.createObjectURL(blob)
        /// 获取heads中的filename文件名
        let link = document.createElement('a')
        link.href = url
        /// 下载后文件名
        link.setAttribute('download', "DinerCostPrice_"+new Date().getTime()+".xlsx")
        document.body.appendChild(link)
        // 点击下载
        link.click()
        /// 下载完成后移除元素
        document.body.removeChild(link)
        /// 释放掉blob对象
        window.URL.revokeObjectURL(url)
    })


    //   const fileUrl2 = '/healthcenter/api/admin/registers/export'; // 文件的URL地址
    //   axios.get(fileUrl2, { responseType: 'blob' })
    //     .then(response => {
    //       const url = window.URL.createObjectURL(new Blob([response.data]));
    //       const link = document.createElement('a');
    //       link.href = url;
    //       link.setAttribute('download', "DinerCostPrice_11115992.xlsx");
    //       document.body.appendChild(link);
    //       link.click();
    //     })
    //     .catch(error => {
    //       console.error(error);
    //     });
  


    // const fileUrl = '/healthcenter/api/admin/registers/export'; // 文件的URL地址
    // window.open(fileUrl);

    // const fileUrl = '/admin/registers/export'; // 文件的URL地址
    //   const link = document.createElement('a');
    //   link.href = fileUrl;
    //   link.setAttribute('download', DinerCostPrice_5992.xlsx);
    //   link.click();
    
}







const formatGroups = (row, column, cellValue) => {
    const symNo = row.symNo
    if(symNo) {
        const groups1 = systemInitStore.groups.children.find(r=> symNo.indexOf('02^'+r.id) == 0 );
        if(groups1 && groups1.children) {
            const groups2 = groups1.children.find(e => symNo.indexOf('02^'+groups1.id+'^'+e.id) == 0)
            if(groups2) {
                return groups2.gname
            }
        }
    }
    return ' - ';
}

const formatPlace = (row, column, cellValue) => {
    const place = systemInitStore.places.find( it => it.pno == row.place )
    if(place) {
        return place.pname
    }
    return ' - '
}

const formatCause = (row, column, cellValue) => {
    const causes = systemInitStore.causes.find(r => r.cno == row.causeNo);
    if(causes) {
        return causes.cname;
    }
    return ' - ';
}

const formatEmp = (row, column, cellValue) => {
    return row.empName? row.empName + '['+row.empID+'] ' : row.empID;
}

</script>

<style lang="scss" scoped>
    .records-search {
        height: 70px;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-border-radius-base);
        margin-bottom: 8px;
        line-height: 30px;
        padding: 0px 10px;
        .el-form-item--small {
            margin-right: 12px;
            margin-bottom: 0px;
        }
        .el-form-item {
            margin-right: 12px;
            margin-bottom: 0px;
        }
    }
</style>
